<template>
  <view class="echarts-wrap" style="height: 520rpx">
    <mpvue-echarts
      @onInit="lineInit1"
      canvasId="category1"
      ref="lineChart1"
      @sendImg="sendImg"
    />
    <image v-if="tempFilePath" :src="tempFilePath" class="imgCanvas"></image>
  </view>
</template>

<script>
import * as echarts from "../../charts/echarts.min5.2.0.js";
import mpvueEcharts from "../../charts/echarts.vue";
let lineOptionA = {
  type: "category",
  animation: false,
  color: ["#066BFF"],
  legend: {
    data: ["职位动态数"],
    bottom: "1%",
    textStyle: {
      color: "#333",
      fontSize: 14,
      lineHeight: 18,
    },
    icon: "circle", //图例形状设置
    itemHeight: 10,
  },
  tooltip: {
    trigger: "axis",
    // 这里自定义只是为了把x轴的数据也显示出来
    formatter: function (datas) {
      let res = "";
      for (const i in datas) {
        res += "￥" + datas[i].value;
      }
      return res;
    },
    backgroundColor: "#066BFF",
    textStyle: {
      color: "#fff",
    },
    padding: [8, 12],
  },
  grid: {
    x: 60,
    x2: 15,
    y: 30,
    y2: 65,
  },
  calculable: false,
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC",
        },
      },
    },
  ],
  dataZoom: [
    {
      show: true,
      start: 0,
      end: 50,
    },
  ],

  yAxis: [
    {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
    },
  ],
  series: [
    {
      name: "月薪",
      type: "line",
      smooth: true,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(115, 202, 255, 0.20)",
              },
              {
                offset: 1,
                color: "rgba(6, 107, 255, 0.02)",
              },
            ],
            false
          ),
        },
      },
      itemStyle: {},
      symbolSize: 17,
      showSymbol: false,
      emphasis: {
        symbol: "ring", // 更换为圆环
        itemStyle: {
          color: "#066bff", // 设置圆环的颜色
          borderColor: "#fff", // 设置圆环的边框颜色
          borderWidth: 2, // 设置圆环的边框宽度
          opacity: 1, // 设置圆环的透明度
        },
      },
      data: [],
      selected: false,
    },
  ],
};
export default {
  components: {
    mpvueEcharts,
  },
  props: {
    salaryRegionChart: {
      type: Object,
      default: () => {},
    },
    showRegion: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lineOption1: { ...lineOptionA },
      tempFilePath: null,
    };
  },
  mounted() {
    this.chartCreate();
  },
  methods: {
    sendImg(img) {
      this.tempFilePath = img;
    },
    chartCreate(val) {
      if (val && val.dataX) {
        this.lineOption1.xAxis[0].data = val.dataX;
        this.lineOption1.series[0].data = val.dataY;
        this.$refs.lineChart1.init();
      }
    },
    lineInit1(e) {
      let { width, height } = e;
      let canvas = this.$refs.lineChart1.canvas;
      echarts.setCanvasCreator(() => canvas);
      let lineChart1 = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(lineChart1);
      lineChart1.setOption(this.lineOption1);
      lineChart1.resize();
      let end = this.salaryRegionChart.dataX.length - 1;
      lineChart1.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: end,
        position: ["60%", "30%"],
      });
      this.$refs.lineChart1.setChart(lineChart1);
      let ctx = this.$refs.lineChart1.ctx;
      let cid = ctx.canvasId;
      return lineChart1;
    },
  },
  watch: {
    salaryRegionChart: {
      handler(val) {
        this.chartCreate(val);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
  z-index: 0;
  position: relative;
}
.imgCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
